Build a React component to display a dynamic chart using data fetched from an API.

Question

Aryan Kumar · Answer

Sure, here is an example of a React component to display a dynamic chart using data fetched from an API:
JavaScript
import React, { useState, useEffect } from 'react';
import Chart from 'react-apexcharts';
const DynamicChart = ({ apiUrl }) => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      });
  }, []);
  return (
    andlt;Chart
      options={{
        chart: {
          type: 'line',
        },
        series: [
          {
            name: 'Data',
            data: data,
          },
        ],
      }}
      seriesNames={['Data']}
    />
  );
};
export default DynamicChart;
This component uses the useState hook to store the data that is fetched from the API. The
useEffect hook is used to fetch the data from the API when the component is mounted.
The component then uses the Chart component from the react-apexcharts library to display the data in a line chart. The
options prop to the Chart component is used to configure the chart, and the
series prop is used to pass the data to the chart.
To use this component, you would need to provide the apiUrl prop with the URL of the API that returns the data. You could then use the component to display a dynamic chart of the data that is returned from the API.
Here is an example of how you could use the DynamicChart component:
JavaScript
const apiUrl = 'https://api.example.com/data';
const App = () => {
  return (
    andlt;DynamicChart apiUrl={apiUrl} />
  );
};
export default App;
This code would fetch the data from the API and display it in a line chart. The chart would be updated dynamically as the data from the API changes.

forum

Build a React component to display a dynamic chart using data fetched from an API.

Steilla Mitchel

Can you answer this question?

1 Answers

Liked By